<template>
  <div>
    <div class="container" v-if="data">
      <div class="left">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 标题 -->
        <div class="title">
          <h1>{{data.title}}</h1>
        </div>
        <!-- 时间、阅读 -->
        <div class="info">
          <span>攻略：{{time}}</span>
          <span>阅读：{{data.watch}}</span>
        </div>
        <!-- 主要内容 -->
        <div class="content" v-html="data.content"></div>
        <!-- 评论和分享功能 -->
        <div class="power">
          <div>
            <div class="comment">
              <i class="iconfont iconpinglun"></i>
              <span>评论({{total}})</span>
            </div>
            <div class="share">
              <i @click="share" class="iconfont iconfenxiang"></i>
              <span>分享</span>
            </div>
          </div>
        </div>
        <CommentPublish @reloadCommentList="getCommentList" :data="replyComment" />
        <!-- 评论 -->
        <div class="commentItem">
          <CommentItem
            @sendReply="sendReply"
            :data="item"
            :key="item.id"
            v-for="item in commentList"
          />
        </div>
        <el-pagination
          v-if="total"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="my_start"
          :page-sizes="[5, 10, 15]"
          :page-size="my_limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <div class="right">
        <div class="right_h">相关攻略</div>
        <div class="right_b">
          <RelatedItem :data="item" v-for="(item,index) in RelatedList" :key="index" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RelatedItem from '@/components/post/RelatedItem'
import CommentPublish from '@/components/post/CommentPublish'
import CommentItem from '@/components/post/CommentItem'
export default {
  components: {
    RelatedItem,
    CommentPublish,
    CommentItem
  },
  data() {
    return {
      data: null,
      RelatedList: [],
      my_limit: 5,
      my_start: 0,
      total: 0,
      commentList: [],
      allcommentList: [],
      replyComment: null
    }
  },
  created() {
    this.getData()
    this.getRelatedList()
    this.getCommentList()
  },
  methods: {
    async getData() {
      const { data: res } = await this.$axios.get('/posts', {
        params: { id: this.$route.query.id }
      })
      console.log(res)
      // console.log(res.data[0])
      this.data = res.data[0]
    },
    async getRelatedList() {
      const { data: res } = await this.$axios.get('/posts')
      console.log(res.data)
      this.RelatedList = res.data.splice(res.data.length - 5, 5).reverse()
    },
    // 获取评论列表
    async getCommentList() {
      const { data: res } = await this.$axios.get('/posts/comments', {
        params: {
          post: this.$route.query.id,
          _limit: this.my_limit,
          _start: this.my_start
        }
      })
      this.commentList = res.data
      this.total = res.total
    },
    sendReply(obj) {
      this.replyComment = obj
    },
    handleSizeChange(newSize) {
      this.my_limit = newSize
      this.getCommentList()
    },
    handleCurrentChange(newPage) {
      this.my_start = newPage
      this.getCommentList()
    },
    // 分享功能
    share(){
      this.$message.warning('该功能正在加速开发中')
    }
  },
  watch: {
    $route() {
      this.getData()
      
      this.getRelatedList()
    },
    '$route.query.id':{
      handler(){
        this.getCommentList()
      },
      immediate:true
    }
  },
  computed: {
    time() {
      if (this.data) {
        return this.$moment(this.data.created_at).format('YYYY-MM-DD HH:mm')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
}
.container {
  width: 1000px;
  min-width: 1000px;
  margin: 0 auto;
  // background: pink;
  display: flex;
  padding: 20px 0;
}
.left {
  width: 700px;
  flex: 1;
  .title {
    h1 {
      padding: 20px 0;
      border-bottom: 1px solid #ddd;
    }
  }
  .info {
    height: 60px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    color: #999;
    span {
      margin-left: 30px;
    }
  }
  .content {
    line-height: 1.5;
    /deep/ img {
      max-width: 700px;
    }
  }
  .power {
    display: flex;
    justify-content: center;
    & > div {
      height: 150px;
      display: flex;
      align-items: center;
      div {
        display: flex;
        flex-direction: column;
        margin: 0 15px;
        align-items: center;
        i {
          cursor: pointer;
          font-size: 30px;
          margin-bottom: 5px;
          color:#ffa500;
        }
        span {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
.right {
  width: 280px;
  margin-left: 20px;
  .right_h {
    padding-bottom: 10px;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
  }
}
.commentItem {
  margin-top: 30px;
  border: 1px solid #ddd;
  /deep/ .border{
    &:last-child{
      border-bottom: none;
    }
  }
  /deep/ .parent .border{
    border-bottom: none;
  }
}

</style>